<template>
  <div class="score">
    <div class="title">
      <p class="name">{{$route.query.subject}}</p>
      <p class="description">(总分：{{$route.query.examScore}}分,限时：{{$route.query.time}}分钟)</p>
      <p class="description">学生：{{$cookies.get("name")}}</p>
    </div>
    <div class="total">
      <div class="look">
        {{!$store.state.PracticeOrExam ? '本次考试成绩':'本次练习成绩'}}
      </div>
      <div class="show">
        <div class="number" :class="{'border': isTransition}">
          <span>{{$route.query.score}}</span>
          <span>分数</span>
        </div>
      </div>
      <ul class="time">
        <li><span>开始时间：{{$route.query.startTime}}</span></li>
        <li><span>结束时间：{{$route.query.endTime}}</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";

export default {
  name: "answerScore",
  setup(){
    let isTransition = ref(false)
    onMounted(()=>{
      setTimeout(() => {
        isTransition.value = true
      },1000)
    })
    return{
      isTransition
    }
  }
}
</script>

<style scoped>
.show {
  display: flex;
  justify-content: center;
  align-items: center;
}
.border {
  border: 6px solid #36aafd !important;
  transition: all 2s ease;
  width: 160px !important;
  height: 160px !important;
  transform: rotate(360deg) !important;
  opacity: 1 !important;
}
.score {
  max-width: 800px;
  margin: 0 auto;
}
.score .title{
  margin: 30px 0px 30px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.score .title .name {
  font-size: 26px;
  color: inherit;
  font-weight: 500;
}
.score .title .description {
  font-size: 14px;
  color: #888;
}
.score .total{
  border: 1px solid #dbdbdb;
  background-color: #fff;
  padding: 20px;
}
.score .total .look {
  border-bottom: 1px solid #dbdbdb;
  padding: 0px 0px 14px 14px;
  color: #36aafd;
}

.score .total .number {
  opacity: 0;
  border: 6px solid #fff;
  transform: rotate(0deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-top: 80px;
  margin-bottom: 20px;
  transition: all 1s ease;
}
.score .total span:nth-child(1) {
  font-size: 20px;
  font-weight: 600;
}
.score .total span:nth-child(2) {
  font-size: 14px;
}
.time {
  padding: 0px 70px;
}
.time li {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  margin: 20px 0px;
}
.time li:nth-child(1) {
  background-color: #fcf8e3;
}
.time li:nth-child(2) {
  background-color: #e9f5e9;
}
</style>